import {WidgetClass} from "./widget";
import {WidgetFactory} from "@/modules/IDE/widgetFactory";
export class WidgetPageView extends WidgetClass {
  constructor(options = {}) {
    super(options);
    const {ports, UI} = options
    if (UI) {
      this.UI.data = UI.data
    } else {
      this.UI.data = {
        indicatorData:{
          color:"text-color-primary",
          activeColor: "text-color-anti",
          size:14
        },
        items:[]
      };
      this.initTab();
    }
    if (ports) {
      this.ports = ports;
    } else {
      this.ports = this.assembleDefaultPorts();
    }
  }

  assembleDefaultState(options = {}) {
    const superState = super.assembleDefaultState(options);
    return {
      ...superState,
    };
  }

  assembleDefaultPorts() {
    const superState = super.assembleDefaultPorts();
    return {
      ...superState,
      values: [
       ...superState.values,
        {
          name: "页码",
          key: "page",
          type: "int",
          value: 0,
        }
      ],
      events: [
        {
          name: "页码改变事件",
          key: `valueChange-${this.id}`,
          eventType: "valueChange",
          type: "event",
          action: [],
        },
      ],
    };
  }
  getDefaultOptions() {
    return {
      rect: {top: 0, left: 0, width: 1024, height: 718},
      backStyle: {backgroundColor: 'bg-color-page'},
      draggable: false,
      resizable: false,
      roomId: this.roomId,
      componentId: this.componentId,
      subPageId: this.subPageId,
    };
  }

  initTab() {
    const dftOptions = this.getDefaultOptions();
    const tabContainer1 = WidgetFactory.createContainer({...dftOptions, display: true, name: '滚动页面1'});
    const tabContainer2 = WidgetFactory.createContainer({...dftOptions, display: false, name: '滚动页面2'});
    WidgetFactory.widgetAppendChild(this, tabContainer1);
    WidgetFactory.widgetAppendChild(this, tabContainer2);
    this.UI.data.items.push({
      text: "滚动页面1",
      widgetId: tabContainer1.id,
      sortNo: 1
    });
    this.UI.data.items.push({
      text: "滚动页面2",
      widgetId: tabContainer2.id,
      sortNo: 2
    });
  }

  addTab() {
    const {tabData = {}, tabSize = {}} = this.UI.data;
    const {layout, offset = {}} = tabData;
    const {top = 0, bottom = 0} = offset;
    const {height: tabHeight = 0} = tabSize;
    let rect = {top: 0, left: 0, width: 1027, height: 748};

    const dftOptions = this.getDefaultOptions();
    const tabContainer = WidgetFactory.createContainer({
      ...dftOptions,
      rect: rect,
      name: '滚动页面',
      visible: true,
    });
    this.UI.data.items.push({
      text: '滚动页面',
      widgetId: tabContainer.id,
      sortNo: this.UI.data.items.length + 1,
    });
    WidgetFactory.widgetAppendChild(this, tabContainer);
    return tabContainer.id;
  }

  deleteTab(childId) {
    const activeTab = this.children.find(child => !!child.display);
    const {items = []} = this.UI.data;
    const idx = items.findIndex(tab => tab.widgetId === childId);
    if (!!~idx) {
      WidgetFactory.deleteWidget(WidgetFactory.getWidgetById(childId));
      items.splice(idx, 1);
      if (!activeTab) return items[0].widgetId;
      if (activeTab.id === childId) {
        const newIdx = Math.max(0, idx - 1);
        return items[newIdx].widgetId;
      }
    }
  }
}

